<route lang="json5">
{
  layout: "page",
  style: {
    navigationBarTitleText: "首页编辑",
  },
}
</route>

<template>
  <wd-toast />
  <view class="home-edit">
    <view class="content-tag">
      <view class="content-tag-list">
        <view class="content-tag-list-item" v-for="(item,index) in tags" :key="index">
          {{item}}
          <uni-icons @click="deleteTag(item)" class="icon-delete" type="closeempty" color="#bfbfbf" size="12"></uni-icons>
        </view>
      </view>
      <view @click="addTagFun" class="content-tag-add">
        <uni-icons class="icon-add" type="plusempty" color="#bfbfbf" size="18"></uni-icons>
      </view>
    </view>
    <view class="content-desc">
      <view class="box">
        <view class="toolbar">
          <uni-icons
            @click="handleInsertImage"
            type="image-filled"
            color="#bfbfbf"
            size="36"
          ></uni-icons>
          <button @click="handleFontSize('正')">正</button>
          <button @click="handleFontSize('大', 'bold')">大</button>
          <button @click="handleFontSize('中', 'bold')">中</button>
          <button @click="handleFontSize('小', 'bold')">小</button>
        </view>
        <editor
          id="editor"
          :show-img-toolbar="true"
          :show-img-resize="true"
          :show-img-size="true"
          class="ql-container container"
          placeholder="请尽情发挥吧..."
          @input="richText"
          @ready="onEditorReady"
        ></editor>
      </view>
    </view>
    <view>
      <uni-popup
        ref="popupSignature"
        type="center"
        background-color="#fff"
        border-radius="20px 20px 20px 20px"
        class="my-nick-pop"
      >
        <view class="my-nick-pop-title">修改描述</view>
        <view class="my-nick-pop-input">
          <input
            type="text"
            :value="signature"
            placeholder="请输入描述"
            @input="signatureChange"
            @blur="signatureChange"
          />
        </view>
        <view class="my-nick-pop-btn">
          <button @click="canceSignature">取消</button>
          <button class="my-nick-pop-btn-sure" @click="changeSignature">
            确定
          </button>
        </view>
      </uni-popup>
    </view>
    <view class="edit-btn-wrapper">
      <view class="edit-btn-content">
        <view
          @click="sureBtn"
          class="edit-btn bg-#B8F069 text-#1b1b1b text-24rpx font-bold p-l-20rpx p-t-20rpx p-b-20rpx rounded-32rpx"
        >
          确定
        </view>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import {
  computed,
  onMounted,
  watch,
  reactive,
  ref,
} from "@/uni_modules/lime-shared/vue";
import { httpUpdateBasicInfo, httpGetBasicInfoDetail } from "@/service/home";
import { useToast } from "wot-design-uni";
import { tabbarStore } from "@/components/fg-tabbar/tabbar";

const toast = useToast();
const VITE_UPLOAD_BASEURL = import.meta.env.VITE_UPLOAD_BASEURL;
let editorCtx;
let editorValue;
const tags = ref([])
const popupSignature = ref<any>(null);
const signature = ref("");

// 删除tag
const deleteTag = (value) => {
  tags.value = tags.value.filter(item => item !== value);
}

const addTagFun = () => {
  popupSignature.value.open("center");
}

const canceSignature = () => {
  popupSignature.value.close();
};
const signatureChange = (v: any) => {
  signature.value = v?.detail?.value;
};
const changeSignature = async () => {
  tags.value.push(signature.value)
  canceSignature()
  signature.value = ''
};

const getBasicInfoDetail = async () => {
  try {
    const res = await httpGetBasicInfoDetail({ id: 1 });
    console.log(res, 88888);
    if (res.code === 200) {
      editorValue = res.data.workReport;
      if(res.data.slogan){
        tags.value = res.data.slogan.split(',')
      }
      setTimeout(() => {
        editorCtx.setContents({
          html: res?.data?.workReport,
        });
      }, 1000);
    }
  } catch (error) {
    console.log(error);
  }
};

const updateBasicInfo = async () => {
  try {
    const res: any = await httpUpdateBasicInfo({
      id: 1,
      workReport: editorValue,
      slogan: tags.value.join(','),
    });
    if (res.code === 200) {
      toast.show("操作成功");
      tabbarStore.setCurIdx(2);
      uni.reLaunch({
        url: "/pages/home/index",
      });
    } else {
      toast.show(res.msg);
    }
  } catch (error) {
    console.log(error, "error");
  }
};

const richText = (e) => {
  editorValue = e.target.html;
};

const onEditorReady = () => {
  uni
    .createSelectorQuery()
    .select("#editor")
    .context(function (res: any) {
      editorCtx = res?.context;
    })
    .exec();
};
const handleFontSize = (type, isBold) => {
  console.log("editorCtx", editorCtx);
  if (isBold) {
    editorCtx.format("bold");
  }
  if (type === "正") {
    editorCtx.format("font-size", "12px");
  } else if (type === "大") {
    editorCtx.format("font-size", "26px");
  } else if (type === "中") {
    editorCtx.format("font-size", "20px");
  } else if (type === "小") {
    editorCtx.format("font-size", "16px");
  }
};

//插入图片
const handleInsertImage = () => {
  uni.chooseImage({
    count: 1, //插图图片数量
    sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ["album", "camera"], //从相册选择和拍照
    success: function (res) {
      console.log("===", res);
      let linkUrl = "";
      uni.uploadFile({
        url: VITE_UPLOAD_BASEURL,
        name: "file",
        filePath: res.tempFilePaths[0],
        header: {
          "content-type": "multipart/form-data",
        },
        success: (res: any) => {
          console.log(res);
          const data = JSON.parse(res.data);
          linkUrl = data.data.link;
          console.log("data.data.link", data.data.link);
          editorCtx.insertImage({
            src: data.data.link,
            width: "100%",
            height: "100%",
            success: function (res) {
              console.log("成功插入图片");
            },
            fail: function (res) {
              console.log("插入图片失败");
            },
          });
        },
        fail: (fail) => {
          console.log(fail);
        },
      });
    },
  });
};

const sureBtn = () => {
  updateBasicInfo();
};

onMounted(() => {
  getBasicInfoDetail();
});
</script>

<style lang="scss" scoped>
.home-edit {
  padding-bottom: 140rpx;

  .my-nick-pop {
    padding: 20rpx 28rpx;
    .my-nick-pop-title {
      display: flex;
      flex-direction: row;
      justify-content: center;
      width: 600rpx;
      padding-top: 50rpx;
    }
    .my-nick-pop-input {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding: 40rpx;
      input {
        flex: 1;
        height: 80rpx;
        padding: 0 20rpx;
        font-size: 28rpx;
        color: #555;
        border: 2rpx #eee solid;
        border-radius: 10rpx;
      }
    }
    .my-nick-pop-btn {
      display: flex;
      flex-direction: row;
      border-top-color: #f5f5f5;
      border-top-style: solid;
      border-top-width: 2rpx;
      .my-nick-pop-btn-sure {
        color: #2595f3;
        border-left: 2rpx solid #eee;
      }
      button {
        flex: 1;
        background: transparent;
      }
    }
  }

  .content-tag {
    width: 100%;
    height: 60 rpx;
    background: #ffffff;
    display: flex;
    box-sizing: border-box;
    padding: 0 24rpx;
    box-sizing: border-box;
    margin-top: 36rpx;

    .content-tag-list {
      height: 60rpx;
      flex-grow: 1;
      overflow-x: scroll;
      white-space: nowrap;
    }
    .content-tag-list-item{
      display: inline-block;
      height: 42rpx;
      background: #eeeeee;
      margin-right: 12rpx;
      font-size: 24rpx;
      text-align: center;
      line-height: 42rpx;
      box-sizing: border-box;
      border-radius: 6rpx;
      padding: 0rpx 36rpx 0rpx 16rpx;
      margin-top: 8rpx;
      position: relative;
    }
    .icon-delete{
      position: absolute;
      top: 0rpx;
      right: 6rpx;
    }

    .content-tag-add {
      width: 60rpx;
      height: 60rpx;
      font-size: 28rpx;
      text-align: center;
      line-height: 60rpx;
      background: #fff;
      box-shadow: -60rpx 0rpx 80rpx 1rpx rgba(0, 0, 0, 0.1);
    }
  }
  .content-desc {
    width: 100%;
    height: calc(100vh - 140rpx);
    // height: 880rpx;

    //border-bottom: 1px solid #eeeeee;
  }

  .box {
    width: 100vw;
    // height: 800rpx;
    // padding-bottom: 100rpx;
    height: calc(100vh - 90rpx);
    display: flex;
    flex: 1;
    flex-direction: column;
    background-color: #ffffff;
    .toolbar {
      padding: 0 20rpx;
      display: flex;
      flex-wrap: wrap;
      padding-top: 16rpx;
      border-top: 1px solid #eeeeee;
      border-bottom: 1px solid #eeeeee;
      button {
        min-width: 96rpx;
        font-size: 28rpx;
        margin-bottom: 16rpx;
      }
    }
    .container {
      display: flex;
      flex: 0.97;
      background-color: #fff;
      padding: 0 20rpx;
      padding-top: 8rpx;
    }
  }

  .edit-btn-wrapper {
    width: 100%;
    background: #fff;
    position: fixed;
    left: 0;
    bottom: 0;

    .edit-btn-content {
      padding: 20rpx 35rpx;

      .edit-btn {
        width: 100%;
        text-align: center;
      }
    }
  }
}
</style>
